<template>
    <div class="app-container">
      <!-- 搜索 -->
      <div class="search-div">
        <el-form label-width="70px" size="small">
          <el-row>
            <el-col :span="8">
              <el-form-item label="关 键 字">
                <el-input
                  style="width: 95%"
                  v-model="searchObj.keyword"
                  placeholder="社区名称/业主名称/车牌号"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="操作时间">
                <el-date-picker
                  v-model="createTimes"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  style="margin-right: 10px; width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="display: flex">
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="fetchData()"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetData"
              >重置</el-button
            >
          </el-row>
        </el-form>
      </div>
  
        <!-- 工具条 -->
        <div class="tools-div">
        <el-button type="success" icon="el-icon-plus" size="mini" @click="add">添 加</el-button>
        <el-button class="btn-add" size="mini" @click="batchRemove()" >批量删除</el-button>
      </div>
  
      <!--    车位使用情况管理 -->
      <div class="app-container">
      <!-- 列表 -->
      <el-table
        v-loading="listLoading"
        :data="list"
        stripe
        border
        @selection-change="handleSelectionChange"
        style="width: 100%;margin-top: 10px;">
        <el-table-column type="selection"/>
  
        <el-table-column
          label="序号"
          width="70"
          align="center">
          <template slot-scope="scope">
            {{ (page - 1) * limit + scope.$index + 1 }}
          </template>
        </el-table-column>
  
        <!-- <el-table-column prop="id" label="ID" width="180"/> -->
        <el-table-column prop="param.communityName" label="所属小区" width="110"/>
        <el-table-column prop="code" label="车位编号" />
        <el-table-column prop="picture" label="车位牌照" />
        <el-table-column prop="carNumber" label="车牌号" />
        <el-table-column prop="ownerName" label="车牌所有人" />
        <el-table-column prop="telephone" label="联系方式" />
        <el-table-column label="使用性质" width="80">
          <template slot-scope="scope">
            <!-- 0:未使用 1：已出租  2:临时停车  3:已被购买 -->
            <!-- <el-switch
              v-model="scope.row.status===1"
              @change="switchStatus(scope.row)">
            </el-switch> -->
            <el-tabs>
              <el-tag v-if="scope.row.useType==0" >购买</el-tag>
              <el-tag  v-if="scope.row.useType==1">月租</el-tag>
              <el-tag v-if="scope.row.useType==2">年租</el-tag>
            </el-tabs>
          </template>
        </el-table-column>
        <el-table-column prop="totalFee" label="总费用(￥)" />
        <el-table-column prop="startTime" label="开始时间" />
        <el-table-column prop="endTime" label="截止时间" />
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column prop="updateTime" label="修改时间" />


        <el-table-column label="操作"  align="center" fixed="right">
          <template slot-scope="scope">
            <!-- <el-button type="warning" icon="el-icon-baseball" size="mini" @click="showAssignRole(scope.row)" title="分配角色"/> -->
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(scope.row.id)" title="修改"/>
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeDataById(scope.row.id)" title="删除" />
          </template>
        </el-table-column>
  
      </el-table>
  
    </div>
  
  
      <!-- 分页组件 -->
      <el-pagination
        :current-page="page"
        :total="total"
        :page-size="limit"
        style="padding: 30px 0; text-align: center"
        layout="total, prev, pager, next, jumper"
        @current-change="fetchData"
      />
  
  <!-- 添加布局页面代码 -->
      <el-dialog title="添加/修改" :visible.sync="dialogVisible" width="40%" >
        <el-form ref="dataForm" :model="sysParkingUse"  label-width="100px" size="small" style="padding-right: 40px;">

          <el-form-item label="所属小区">
          <template>
          <el-select v-model="sysParkingUse.communityId" placeholder="请选择">
            <el-option
              v-for="item in communityList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </template>
        </el-form-item>
          <el-form-item v-if="!sysParkingUse.id" label="车位编号" prop="code">
            <el-input v-model="sysParkingUse.code" />
          </el-form-item>
          <el-form-item label="车辆所有人" prop="ownerName">
            <el-input v-model="sysParkingUse.ownerName"/>
          </el-form-item>
          <el-form-item label="车牌号码" prop="carNumber">
            <el-input v-model="sysParkingUse.carNumber"/>
          </el-form-item>
          <el-form-item label="联系方式" prop="telephone">
            <el-input v-model="sysParkingUse.telephone"/>
          </el-form-item>
          <el-form-item label="总费用(￥)" prop="totalFee">
            <el-input v-model="sysParkingUse.totalFee"/>
          </el-form-item>
          <el-form-item label="使用性质" prop="useType">
            <!-- <el-input v-model="sysParkingUse.communityName"/> -->
            <!-- <el-select v-model="sysParkingUse.status" placeholder="请选择" style="width: 100%">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
              </el-select> -->
        

            <el-radio-group v-model="sysParkingUse.useType" >
              <el-radio label="0">购买</el-radio>
              <el-radio label="1">月租</el-radio>
              <el-radio label="2">年租</el-radio>
        </el-radio-group>

          </el-form-item>

          <!-- 上传图片 -->
          <el-form-item label="车辆牌照" prop="picture">
            <el-input v-model="sysParkingUse.picture"/>
          </el-form-item>
          <el-form-item  label="开始时间" prop="startTime">
            <el-date-picker
                v-model="sysParkingUse.startTime"
                type="datetime"
                placeholder="选择开始时间"
                value-format="yyyy-MM-dd HH:mm:ss"  style="width: 100%;">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间" prop="endTime">
            <el-date-picker
                v-model="sysParkingUse.endTime"
                type="datetime"
                placeholder="选择结束时间"
                value-format="yyyy-MM-dd HH:mm:ss"  style="width: 100%;">
            </el-date-picker>
          </el-form-item>
          <el-form-item v-if="sysParkingUse.id" label="创建时间" prop="createTime"  >
            <el-input v-model="sysParkingUse.createTime" disabled/>
          </el-form-item>
         
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false" size="small" icon="el-icon-refresh-right">取 消</el-button>
          <el-button type="primary" icon="el-icon-check" @click="saveOrUpdate()" size="small">确 定</el-button>
        </span>
      </el-dialog>
      
    </div>
  </template>
   
   <script>
   
  import api from "@/api/sysParking/parkinguse.js";
  import comApi from '@/api/sysCommunity/community';
  export default {
    data() {
      return {
        listLoading: true, // 数据是否正在加载
        list: [], // 数据列表
        total: 0, // 数据库中的总记录数
        page: 1, // 默认页码
        limit: 4, // 每页记录数
        searchObj: {}, // 查询表单对象
        // 处理时间范围条件的
        createTimes: [],
        dialogVisible: false,
        sysParkingUse: {},
        saveBtnDisabled: false,
         // 选中的数据【批量删除】
         selectValueData:[],
            //小区列表
        communityList:[],
  
        options: [
        // 车位状态 0:未使用 1：已出租  2:临时停车  3:已被购买
                 {
                    value: "0",
                    label: "未使用",
                },
                {
                    value: "1",
                    label: "已出租",
                },
                {
                    value: "2",
                    label: "临时停车",
                },
                {
                    value: "3",
                    label: "已被购买",
                },
            ],
       CarTypes:[
        // ( 0:业主 1:物业人员 2:外来人员)
                {
                    value: "0",
                    label: "业主",
                },
                {
                    value: "1",
                    label: "物业人员",
                },
                {
                    value: "2",
                    label: "外来人员",
                },
       ]
      };
    },
    created() {
      this.fetchData();
      this.fetchCommunityList();
    },
    methods: {

       //查询所有小区 放入选择框
       fetchCommunityList(){
          comApi.finAllCommunity().then(res=>{
            this.communityList = res.data
          })
      },
  
        // 5、批量删除
        batchRemove(){
        // 判断是否有选中select
        if(this.selectValueData.length==0)
        {
           this.$message.warning('请选择要删除的记录！')
          return;
        }
          this.$confirm("此操作将永久删除该车位使用情况, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          var ids=[];
          for(var i=0;i<this.selectValueData.length;i++)
          {
            var obj= this.selectValueData[i];
            // 获取id值
            var id = obj.id;
            // 将id放进到数组中
           ids.push(id);
          }
          api.batchremoveId(ids)
            .then((response) => {
            // 提示
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            // 刷新页面
            this.fetchData();
          });
        });
      },
      handleSelectionChange(selectValue){
      //  console.log(selectValue);
       this.selectValueData= selectValue;
      },
     
  
        // 4、根据单个id,删除
         // 删除操作
      removeDataById(id) {
        this.$confirm("此操作将永久删除该车位使用情况, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
           // a.发送请求
          api.removeParkingUseById(id)
            .then((res) => {
            // 提示
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            // b.刷新页面
            this.fetchData();
          });
        });
      },
  
      // 修改
      updateParkingUse(){
      api.updateParkingUse(this.sysParkingUse)
       .then(response=>{
          //a.提示语
          this.$message({
            message: '修改成功',
            type: 'success'
          });
          //b.关闭弹框
          this.dialogVisible=false;
          //c.刷新数据列表
          this.fetchData();
       })
       console.log(this.sysParkingUse)

    },
  
      // 根据id 回显数据
    edit(id){
        
      //a.根据id去得到当前用户 
      api.findParkingUseById(id).then(response=>{
        //b.将数据赋值给 sysParkingUse
         this.sysParkingUse = response.data;
         console.log(this.sysParkingUse);
         //c.打开弹框
         this.dialogVisible=true;
      })
    },
  
      // 添加或者修改
    saveOrUpdate(){
      if(this.sysParkingUse.id!=null){
         this.updateParkingUse();
      }else
      {
        this.addParkingUse();
      }
    },
  
      // 3、添加
      addParkingUse(){
       api.addParkingUse(this.sysParkingUse).then(response=>{
          //a.提示语
          this.$message({
            message: '添加成功',
            type: 'success'
          });
          //b.关闭弹框
          this.dialogVisible=false;
          //c.刷新数据列表
          this.fetchData();
          
       })
    },  
      
        //打开弹框
        add(){
            // 当打开弹框之前，清空文本框所有数据  
              this.sysParkingUse={};
              this.dialogVisible=true
            },
  
  
  
      // 2、重置表单
      resetData() {
        // 1.清空条件搜索
        this.searchObj = {};
        //2.清空日期条件
  
        this.createTimes = [];
        //3.刷新数据列表
        this.fetchData();
      },
  
      // 1、分页+查找
      fetchData(page = 1) {
        this.page = page;
        if (this.createTimes && this.createTimes.length == 2) {
          this.searchObj.createTimeBegin = this.createTimes[0];
          this.searchObj.createTimeEnd = this.createTimes[1];
        }
  
        api.findPageInfo(this.page, this.limit, this.searchObj)
          .then((response) => {
            //this.list = response.data.list
            this.list = response.data.records;
            this.total = response.data.total;
            // 数据加载并绑定成功
            this.listLoading = false;
          });
      },
    },
  };
  </script>
  
   <style>
  </style>